<template>
  <div class="add-card">
    <header class="add-header">
      <el-page-header content="查询信息" @back="$router.back()" />
    </header>
    <main class="add-main">
      <div class="form-container">
        <div class="title">车辆信息</div>
        <div class="form">
          <div class="info">
            <table>
              <tr>
                <td class="label">车主姓名:</td>
                <td>{{ info.personName }}</td>
              </tr>
              <tr>
                <td class="label">车牌号码:</td>
                <td>{{ info.carNumber }}</td>
              </tr>
            </table>
            <table>
              <tr>
                <td class="label">联系方式:</td>
                <td>{{ info.phoneNumber }}</td>
              </tr>
              <tr>
                <td class="label">车辆品牌:</td>
                <td>{{ info.carBrand }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="form-container">
        <div class="title">月卡缴费记录</div>
        <div class="form">
          <el-table
            :data="payList"
            stripe
            style="width: 100%">
            <el-table-column

              label="序号"
              type="index"
              :index="indexMethod"
              width="180"/>
            <el-table-column
              prop="date"
              label="有效时间"/>
            <el-table-column
              prop="paymentAmount"
              label="支付金额"/>
            <el-table-column
              prop="paymentMethod"
              label="支付方式"/>
            <el-table-column
              prop="createTime"
              label="办理时间"/>
            <el-table-column
              prop="createUser"
              label="办理人"/>
          </el-table>
        </div>
      </div>

    </main>
  </div>
</template>

<script>
import { getDetailCard } from '@/api/carMangement'
export default {
  name: 'ChaXun',
  data() {
    return {
      info: {},
      payList: []
    }
  },
  created() {
    this.getDetailFn()
  },
  methods: {
    getDetailFn() {
      getDetailCard(this.$route.query.id).then((res) => {
        this.info = res.data
        this.payList = res.data.rechargeList.map((item) => {
          return {
            rechargeId: item.rechargeId,
            date: item.cardStartDate + '至' + item.cardEndDate,
            paymentMethod: item.paymentMethod,
            paymentAmount: item.paymentAmount,
            createTime: item.createTime,
            createUser: item.createUser
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.add-card {
  background-color: #f4f6f8;
  height: 100vh;

  .add-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 64px;
    background-color: #fff;
    .left {
      span {
        margin-right: 4px;
      }
      .arrow{
        cursor: pointer;
      }
    }
    .right {
      text-align: right;
    }
  }
  .add-main {
    background: #f4f6f8;
    padding: 20px 130px;
    .form-container {
      background-color: #fff;
      .title {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
        border-bottom: 1px solid #e5e5e5;
      }

      .form {
        margin-bottom: 20px;
        padding: 20px 65px 24px;
        .info {
          height: 100px;
          .label {
            color: gray;
            padding-right: 10px;
          }
        }
      }
    }
    .preview{
      img{
        width: 100px;
      }
    }
  }
}
</style>
